<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>系统用户-新增</title>
		<link rel="icon" href="assets/img/lcxm.ico" type="image/ico">
		<script type="text/javascript" src="../../commonFragment/header.js"></script>
		<script type="text/javascript" src="../../commonFragment/nojs.header.js"></script>
		<script>
			var menuSetting = {	
				callback: {
					onClick: checkPid
				}
			};
			/**构建父级菜单树*/
			$(function() {
				//点击父级菜单输入框 弹出树
				$(document).on("click","#pidName", function() {
					var $input = $(this);
					$("#treeDemo").toggle("fast");
					$("body").bind("mousedown", onBodyDown);
				});
			});
			//隐藏tree
			function hideTree() {
				$("#treeDemo").fadeOut("fast");
				$("body").unbind("mousedown", onBodyDown);
			}

			function onBodyDown(event) {
				if (!(event.target.id == "pidName" || event.target.id == "treeDemo" || $(event.target).parents("#treeDemo").length >
						0)) {
					hideTree();
				}
			}
			/**
			 * 为编辑页面的时候把pid对应的树节点选中 并把节点名称反写到input框
			 */
			function selectedNode() {
				var pid = $("#pid").val();
				var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
				if (pid == 0 || !pid || !zTreeObj) {
					return;
				}
				var node = zTreeObj.getNodeByParam("id", pid, null);
				//选中当前阶段
				zTreeObj.selectNode(node);
				zTreeObj.setting.callback.onClick(null, zTreeObj.setting.treeId, node);

			}

			//选择树节点的时候把数据反到input
			function checkPid(event, treeId, treeNode) {
				$("#pid").val(treeNode.id);
				$("#pidName").val(treeNode.name);
			}
		</script>

	</head>
	<body>
		<div class="container-fluid p-t-15">
			<div class="row">
				<div class="col-lg-12">
					<div class="card">
						<div class="card-body">
							<form class="form-horizontal validate" role="form vue-form" method="post" action="/system/menu/save"
							 data-form-url="/system/menu/detail">
								<!-- 隐藏域 -->
								<div class="form-group hide">
									<input type="text" name="id" :value="id" />
								</div>

								<div class="form-group">
									<label for="type" class="col-sm-2 control-label">菜单类型*</label>
									<div class="col-sm-6 ">
										<select class="form-control" id="type" name="type" :data-value="type" :value="type" data-rule-required="true">
											<option value="">--请选择--</option>
											<option value="1">目录</option>
											<option value="2">菜单</option>
											<option value="3">按钮</option>
										</select>
									</div>
									<div class="col-sm-4  help-inline form-control-static"></div>
								</div>
								<div class="form-group">
									<label for="pid" class="col-sm-2 control-label">父级菜单</label>
									<div class="col-sm-6 ">
										<input type="hidden" class="form-control" id="pid" name="pid" :value="pid" placeholder="请选择父级菜单" />
										<input type="text" class="form-control" id="pidName" readonly="readonly" placeholder="请选择父级菜单" autocomplete="off" />
										<!-- <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul> -->
										<ul id="treeDemo" class="ztree" style="width: 100%;display: none;"
											data-url="/system/menu/chooseParent" data-setting="menuSetting" data-after="selectedNode">
											
										</ul>
									</div>
									<div class="col-sm-4  help-inline form-control-static"></div>
								</div>

								<div class="form-group">
									<label for="name" class="col-sm-2 control-label">菜单名称*</label>
									<div class="col-sm-6 ">
										<input type="text" class="form-control" id="name" name="name" :value="name" data-rule-remote=""
										 data-msg-remote="名称重复" data-rule-required="true" data-rule-digits="false" data-rule-number="false"
										 placeholder="请输入菜单名称" autocomplete="off" />
									</div>
									<div class="col-sm-4  help-inline form-control-static"></div>
								</div>
								
								<div class="form-group">
									<label for="name" class="col-sm-2 control-label">菜url</label>
									<div class="col-sm-6 ">
										<input type="text" class="form-control" id="url" name="url" :value="url" 
										 placeholder="请输入菜单地址" autocomplete="off" />
									</div>
									<div class="col-sm-4  help-inline form-control-static"></div>
								</div>
								<div class="form-group">
									<label for="icon" class="col-sm-2 control-label">图标</label>
									<div class="col-sm-6 ">
										<input type="text" class="form-control icon-picker" id="icon" name="icon" :value="icon" placeholder="请选择图标">
									</div>
									<div class="col-sm-4  help-inline form-control-static"></div>
								</div>


								<div class="form-group">
									<label for="permission" class="col-sm-2 control-label">权限标识*</label>
									<div class="col-sm-6 ">
										<input type="text" class="form-control" id="permission" name="permission" :value="permission" placeholder="请输入权限标识">
									</div>
									<div class="col-sm-4  help-inline form-control-static"></div>
								</div>

								<div class="form-group">
									<label for="sort" class="col-sm-2 control-label">序号*</label>
									<div class="col-sm-6 ">
										<input type="number" class="form-control" id="sort" name="sort" :value="sort" data-rule-required="true"
										 data-rule-digits="true" data-rule-number="true" placeholder="请输入序号">
									</div>
									<div class="col-sm-4  help-inline form-control-static"></div>
								</div>

								<div class="form-group">
									<label for="enable" class="col-sm-2 control-label">状态*</label>
									<div class="col-sm-6 ">
										<select class="form-control" id="enable" name="enable" :data-value="enable" :value="enable"
										 data-rule-required="true">
											<option value="">--请选择--</option>
											<option value="false">禁用</option>
											<option value="true">启用</option>
										</select>
									</div>
									<div class="col-sm-4  help-inline form-control-static"></div>
								</div>

								<div class="form-group clearfix">
									<div class="col-sm-offset-3 col-sm-9">
										<button type="button" class="btn btn-primary action-ajax-form">
											<i class="glyphicon glyphicon-ok"></i> 提交
										</button>
										<button type="button" class="btn btn-info action-close-tab">
											<i class="glyphicon glyphicon-repeat"></i> 返回
										</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
